<template>
  <view>
    <view class="f-center u-p-80">
      <image src="../../static/images/logo.png" class="logo" mode="widthFix"></image>
    </view>

    <view class="u-p-l-65 u-p-r-65">
      <view class="ipt-group">
        <u-input class="ipt" v-model="username" placeholder="请输入手机号"></u-input>
      </view>

      <view class="ipt-group" v-show="loginType == 'pwd'">
        <u-input class="ipt" v-model="password" placeholder="请输入密码" type="password" :password-icon="false"></u-input>
        <view class="forget" @click="$goto('/pages/account/forget')">忘记密码</view>
      </view>

      <view class="ipt-group" v-show="loginType == 'code'">
        <u-input class="ipt" v-model="code" placeholder="请输入验证码" type="number"></u-input>
        <my-btn :size="[130, 60, 20]" bg="linear-gradient(to right, #fe8448, #fb964e, #f8a753)" color="#fff" round>点击获取</my-btn>
      </view>
    </view>

    <view class="u-p-60">
      <my-btn :size="[630, 80, 28]" bg="linear-gradient(to right, #fe8448, #fb964e, #f8a753)" color="#fff" round>登录</my-btn>
      <view class="flex-row justify-between align-center u-m-t-24 links">
        <view v-show="loginType == 'code'" @click="loginType = 'pwd'">账号密码登录</view>
        <view v-show="loginType == 'pwd'" @click="loginType = 'code'">短信验证码登录</view>
        <view @click="$goto('/pages/account/register')">账号注册</view>
      </view>
    </view>

    <view class="third">
      <view class="title">
        <view class="line"></view>
        <view class="text">第三方登录</view>
        <view class="line"></view>
      </view>
      <my-btn :size="[100, 100]">
        <image src="../../static/images/wx.png" mode="widthFix"></image>
      </my-btn>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        loginType: 'pwd',
        username: '',
        password: '',
        code: ''
      }
    }
  }
</script>

<style lang="scss">
  .logo {
    width: 180rpx;
    height: 180rpx;
  }

  .ipt-group {
    margin: 24rpx 0;
    border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;

    .ipt {
      width: 100%;
    }

    .forget {
      width: 130rpx;
      font-size: 22rpx;
      color: #CCCCCC;
      text-align: center;
    }
  }

  .links {
    font-size: 24rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
  }

  .third {
    .title {
      margin: 40rpx auto;
      width: 460rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .line {
        width: 120rpx;
        height: 2rpx;
        background: #F6AD3A;
      }

      .text {
        font-size: 24rpx;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #F6AD3A;
      }
    }

    image {
      width: 100rpx;
      height: 100rpx;
    }
  }
</style>
